<template>
  <div v-if="!z">
    <el-popover
      v-if="num && Array.isArray(row)"
      placement="top"
      title="详细内容"
      width="200"
      trigger="click"
      :content="row instanceof Array ? row[0] : row"
    >
      <p class="ellipsis" slot="reference">{{ dataType }}</p>
    </el-popover>
    <el-popover
      v-else-if="!sum && row && row.length > 7"
      placement="top"
      title="详细内容"
      width="200"
      trigger="click"
      :content="row"
    >
      <p class="ellipsis" slot="reference">{{ dataType }}</p>
    </el-popover>
    <p v-else>{{ row ? row : "" }}</p>
  </div>
  <div v-else>
    <el-popover
      v-if="rowzz"
      placement="top"
      title="详细内容"
      width="200"
      trigger="focus"
      :content="rowzz"
    >
      <el-input
        clearable
        v-model="rowzz"
        class="ellipsis"
        slot="reference"
        @blur="$emit('update:rowz', rowzz)"
      ></el-input>
    </el-popover>
    <el-input
      clearable
      v-else
      v-model="rowzz"
      @blur="$emit('update:rowz', rowzz)"
    ></el-input>
  </div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector";

export default {
  props: {
    row: {
      default: "",
    },
    rowz: {
      default: "",
    },
    num: {
      type: Number,
      default: 10,
    },
    sum: {
      type: Boolean,
      default: false,
    },
    // 区分是否子表
    z: {
      type: Boolean,
      default: false,
    },
  },
  name: "",
  data() {
    return {
      rowzz: this.rowz,
      dialogVisbibel: false,
    };
  },
  watch: {},
  computed: {
    // txtShow() {
    //   let txt;
    //   if (this.rowz) txt = this.rowz.slice(0, this.num) + " ...";
    //   this.rowzz = txt;
    //   return txt;
    // },

    // 判断数据类型
    dataType() {
      if (this.row instanceof Array) {
        return this.row[0].slice(0, this.num) + " ...";
      }
      if (!this.row) {
        return "";
      }
      if (this.row && this.row.length < 7) {
        return this.row;
      }
      return this.row.slice(0, this.num) + " ...";
    },
  },
  created() {},
  mounted() {
    // const _this = this;
    // const erd = elementResizeDetectorMaker();
    // erd.listenTo(this.$refs.content, (element) => {
    //   _this.$nextTick(() => {
    //     //监听到事件后执行的业务逻辑
    //
    //     if (element.offsetHeight > 50) {
    //       this.height_ = element.offsetHeight - 28 + "px";
    //     }
    //   });
    // });
  },
  methods: {},
};
</script>
<style  lang='scss' scoped>
.ellipsis {
  cursor: pointer;
}
</style>